<template>
  <div class="container">
    <div class="top">
      <div class="pic">
        <img :src="$store.state.songMsg.picUrl" alt="" />
      </div>
      <div class="top_right">
        <div class="name">
          {{ $store.state.songMsg.name }}
        </div>
        <div class="text">
          {{ $store.state.songMsg.artists[0].name }}
        </div>
      </div>
    </div>
    <div class="comments_wrap">
      <p>评论区</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <UserItem
          @getIndex="getIndex"
          :ref="'userItem' + index"
          :item="item"
          :index="index"
          v-for="(item, index) in list.comments"
          :key="item.commentId"
        >
          <template slot="subComments">
            <SubComments ref="mySubComments" :replyList="item.beReplied" />
          </template>
        </UserItem>
      </van-list>
    </div>
    <div
      @click.prevent="handleCloseComments"
      v-if="commentIndex != null"
      class="zhezhao"
      :class="{'leave':!zhezhaoAnim}"
    ></div>
  </div>
</template>
 
<script>
import { getComments } from "../../http/Comments/Comments";
import UserItem from "../../components/User-item";
import SubComments from "../../components/SubComments";
export default {
  components: {
    UserItem,
    SubComments,
  },
  async mounted() {
    let res = await getComments(this.$route.query);
    // this.list = res.data.comments
    this.list = res.data;
    this.replyList = res.data.hotComments;
    // 加载状态结束
    this.loading = false;
    // 数据全部加载完成  20条写死
    if (this.list.length >= 20) {
      this.finished = true;
    }
  },
  data() {
    return {
      list: [],
      myList: [],
      replyList: [],
      loading: false,
      finished: false,
      commentIndex: null,
      zhezhaoAnim:false,
    };
  },
  methods: {
    handleCloseComments(e) {
      this.$refs.mySubComments[0].changeAlternateAni();
      this.zhezhaoAnim = !this.zhezhaoAnim
      setTimeout(() => {
        this.$refs["userItem" + this.commentIndex][0].handleClose();
        this.commentIndex = null;
      }, 350);
    },
    getIndex(index) {
      this.zhezhaoAnim = !this.zhezhaoAnim
      this.commentIndex = index;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }
      //     // 加载状态结束
      //     this.loading = false;
      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/public/common.less");
.zhezhao {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.35s  linear;
}
.zhezhao.leave{
     background:rgba(0, 0, 0, 0);
}
.container {
    position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  .top {
    padding: 0.3rem;
    border-bottom: 0.2rem solid rgb(241, 241, 241);
    display: flex;
    align-items: center;
    justify-content: space-around;
    .pic {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: @borderRadius;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .top_right {
      display: flex;
      justify-content: space-around;
      align-content: center;
      padding: 0.4rem 0.3rem;
      box-sizing: border-box;
      flex-direction: column;
      flex: 1;
      .name {
        margin-bottom: 0.2rem;
      }
      .text {
        color: rgb(107, 107, 180);
      }
    }
  }
  .comments_wrap {
    overflow: scroll;
    height: calc(100% - 2rem);
    z-index: 999;
    p {
      font-size: 0.35rem;
      font-weight: bold;
      padding: 0.5rem 0.5rem;
    }
    .comments_item {
      list-style: none;
      padding: 0.3rem;
      border-bottom: 1px solid rgb(241, 241, 241);
    }
  }
}
</style>